import { defineComponent } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import { cloneWidget } from '../../config/functional';
import './index.scss';

export default defineComponent({
  name: 'component-precut',
  props: {
    title: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const perfix = 'componentPrecut';
    // 拖拽组件的配置
    const draggableConfig = {
      name: 'form-design',
      pull: 'clone',
      put: false,
    };

    // JSX 返回
    return () => (
      <div class={perfix}>
        <p class={`${perfix}-title`}>{props.title}</p>
        <VueDraggable
          class={`${perfix}-component`}
          v-model={props.list}
          animation={200}
          sort={false}
          item-key='type'
          clone={cloneWidget}
          group={draggableConfig} // 设置拖拽配置
        >
          {props.list.map((item) => (
            <div class='item' key={item.type}>
              {item.label}
            </div>
          ))}
        </VueDraggable>
      </div>
    );
  },
});
